<template>
  <div id="userLayout" :class="['user-layout-wrapper', device]" v-if="showFlag">
    <div class="container">

      <div class="logo">
        <div class="logo-img"></div>
        <div class="logo-name">{{ systemName }}</div>
      </div>
      <div class="top">
        <div class="system-name">{{ systemName }}</div>
        <div class="system-name-en">{{ systemNameEn }}</div>
      </div>

      <div class="login-container">
        <div class="login-main">
          <route-view></route-view>
        </div>
      </div>

      <div class="login-menu-container" v-if="false">
        <LoginMenu />
      </div>

      <div class="footer">
        <div class="links">
          <!-- <a href="http://doc.jeecg.com" target="_blank">帮助</a>
          <a href="https://github.com/zhangdaiscott/jeecg-boot" target="_blank">隐私</a>
          <a href="https://github.com/zhangdaiscott/jeecg-boot/blob/master/LICENSE" target="_blank">条款</a> -->
        </div>
        <div class="copyright">
          <!-- Copyright &copy; 2019 <a href="http://www.jeecg.com" target="_blank">JEECG开源社区</a> 出品 -->
          Copyright &copy; {{ year }} {{ footText }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import RouteView from '@/components/layouts/RouteView'
import { mixinDevice } from '@/utils/mixin.js'
import config from '@/defaultSettings'
import LoginMenu from '@/components/loginMenu'

export default {
  name: 'UserLayout',
  components: { RouteView, LoginMenu },
  mixins: [mixinDevice],
  data () {
    return {
      systemName: config.systemName,
      systemNameEn: config.systemNameEn,
      footText: config.footText,
      year: new Date().getFullYear(),
      showFlag: process.env.VUE_APP_SSO != 'true'
    }
  },
  mounted () {
    document.body.classList.add('userLayout')

    this.$ls.set('loginSystemPath', this.$route.fullPath)
  },
  beforeDestroy () {
    document.body.classList.remove('userLayout')
  }
}
</script>

<style lang="less" scoped>
@font-face {
  font-family: 'HYk2gj';
  src: url('~@/assets/fonts/HYLingXinTiJ.ttf');
}

#userLayout.user-layout-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  min-width: 1200px;
  min-height: 600px;
  background: #07112c url('~@/assets/login/bg.png') no-repeat;
  background-size: 100% 100%;
  background-position: center center;

  &.mobile {
    .container {
      .main {
        max-width: 368px;
        width: 98%;
      }
    }
  }

  .container {
    width: 100%;
    min-height: 100%;
    // background: #f0f2f5 url(~@/assets/background.svg) no-repeat 50%;
    background-size: 100%;
    // padding: 110px 0 144px;
    position: relative;

    a {
      text-decoration: none;
    }

    .logo {
      position: absolute;
      left: 2vh;
      top: 2vh;

      display: flex;

      .logo-img {
        width: 32px;
        height: 32px;
        background: url('~@/assets/logo.png') no-repeat;
        background-size: 100% 100%;
        margin-right: 5px;
      }

      .logo-name {
        font-family: YouSheBiaoTiHei;
        font-size: 24px;
        color: #FFFFFF;
        line-height: 32px;
        text-align: justifyLeft;
        font-style: normal;
      }
    }

    .top {
      position: absolute;
      text-align: center;
      margin-top: 10vh;
      min-width: 420px;
      width: 100vw;
      user-select: none;

      // 系统名称及英文
      .system-name {
        font-family: HYk2gj;
        font-size: 44px;
        color: #FFFFFF;
        line-height: 44px;
        text-align: center;
        font-style: normal;
        text-transform: none;
      }

      .system-name-en {
        font-family: HYk2gj;
        font-size: 20px;
        color: #FFFFFF;
        line-height: 44px;
        text-align: center;
      }
    }

    .login-container {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      margin-top: 7vh;
      display: flex;
      align-items: center;
      justify-content: center;

      // @media (max-width: 1400px) {
      //   & {
      //     right: 16vw;
      //   }
      // }

      .login-main {}
    }

    .login-menu-container {
      position: absolute;
      width: 150px;
      height: 100%;
      top: 0;
      right: 1.77vw;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .main {
      // min-width: 260px;
      // width: 368px;
      // margin: 0 auto;
    }

    .footer {
      position: absolute;
      width: 100%;
      bottom: 0;
      padding: 0 16px;
      margin: 48px 0 24px;
      text-align: center;

      .links {
        margin-bottom: 8px;
        font-size: 14px;

        a {
          color: rgba(0, 0, 0, 0.45);
          transition: all 0.3s;

          &:not(:last-child) {
            margin-right: 40px;
          }
        }
      }

      .copyright {
        color: #ffffff;
        font-size: 14px;
      }
    }
  }
}
</style>
